<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>信息表</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.0/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="../../static/vendor/font-awesome/css/font-awesome.min.css">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" href="../../static/css/fontastic.css">
    <!-- Google fonts - Poppins -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="http://cdn.jie12366.xyz/style.default.css" id="theme-stylesheet">
    <!-- Favicon-->
    <link rel="shortcut icon" href="../../static/img/favicon.ico">
    <style>
        .button-color:hover {
            background-color: #796aee;
            color: #ffffff;
        }

        .button-color {
            color: #6c757d;
        }

        .input-pos {
            margin-left: 100px;
        }
        .data-pos{
            color: #796aee;
            text-align: center;
            font-size: 1.3rem;
            margin-left: 2rem;
        }
    </style>
</head>
<body>
<div class="page">
    <!-- Main Navbar-->
    <header th:replace="header::header"></header>
    <div class="page-content d-flex align-items-stretch">
        <nav th:replace="navbar::navbar"></nav>
        <div class="content-inner">
            <!-- Page Header-->
            <header class="page-header">
                <div class="container-fluid">
                    <h2 class="no-margin-bottom">表格</h2>
                </div>
            </header>
            <!-- Breadcrumb-->
            <div class="breadcrumb-holder container-fluid">
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/admin/index">主界面</a></li>
                    <li class="breadcrumb-item active">信息表</li>
                </ul>
            </div>
            <section class="tables">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-close">
                                    <div class="dropdown">
                                        <button type="button" id="closeCard3" data-toggle="dropdown"
                                                aria-haspopup="true" aria-expanded="false" class="dropdown-toggle"><i
                                                class="fa fa-ellipsis-v"></i></button>
                                        <div aria-labelledby="closeCard3"
                                             class="dropdown-menu dropdown-menu-right has-shadow">
                                            <a href="/getExcel2" class="dropdown-item"> <i
                                                    class="fa fa-mail-forward"></i>导出</a>
                                            <button onclick="DelSelect2()" class="dropdown-item button-color"><i
                                                    class="fa fa-times"></i>&nbsp;&nbsp;&nbsp;删除
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-header d-flex align-items-center">
                                    <h3 class="h4">协会人员信息表</h3>
                                    <form action="/user/find" method="post">
                                        <input type="text" class="input-pos" id="name" name="name" placeholder="请输入姓名">
                                        <input type="submit" id="sub" class="btn btn-info" value="搜索">
                                    </form>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-striped table-hover">
                                            <thead>
                                            <tr>
                                                <th><input type="checkbox" id="allChecks" onclick="ckAll()"/></th>
                                                <th>#</th>
                                                <th>姓名</th>
                                                <th>学号</th>
                                                <th>班级</th>
                                                <th>QQ</th>
                                                <th>邮箱</th>
                                                <th>电话</th>
                                                <th>部门</th>
                                                <th>余额</th>
                                                <th>编辑</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr th:each="user:${pages.list}">
                                                <td style="CURSOR: hand; HEIGHT: 10px" align="center" width="4"><input
                                                        type="checkbox" th:value="${user.id}" id="check" value=""
                                                        name="check"></td>
                                                <td th:text="${user.id}"></td>
                                                <td th:text="${user.name}"></td>
                                                <td th:text="${user.number}"></td>
                                                <td th:text="${user.stuClass}"></td>
                                                <td th:text="${user.qq}"></td>
                                                <td th:text="${user.email}"></td>
                                                <td th:text="${user.account}"></td>
                                                <td th:text="${user.depart}"></td>
                                                <td th:text="${user.balance}"></td>
                                                <td><a th:href="@{/user/edit(id=${user.id})}">编辑</a></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        <!--实现分页,page.pageNum是当前页数，page.pages是总页数-->
                                        <nav aria-label="Page navigation">
                                            <ul class="pagination">
                                                <li class="page-item previous">
                                                    <a class="page-link" id="previous" onclick="previousPage()" aria-label="Previous">
                                                        <span aria-hidden="true">&laquo;</span>
                                                    </a>
                                                </li>
                                                <input type="hidden" id="pages" th:value="${pages.pages}">
                                                <input type="hidden" id="pageNum" th:value="${pages.pageNum}">
                                                <li class="page-item active"><a class="page-link" th:href="@{/table1(start = ${pages.pageNum})}">
                                                    <span th:text="${pages.pageNum}"></span></a>
                                                </li>
                                                <li class="page-item"><a class="page-link" th:if="${pages.pageNum} &lt; ${pages.pages}"
                                                                         th:href="@{/table1(start = ${pages.pageNum + 1})}">
                                                    <span th:text="${pages.pageNum + 1}"></span></a>
                                                </li>
                                                <li class="page-item"><a class="page-link" th:if="${pages.pageNum + 1} &lt; ${pages.pages}"
                                                                         th:href="@{/table1(start = ${pages.pageNum + 2})}">
                                                    <span th:text="${pages.pageNum + 2}"></span></a>
                                                </li>
                                                <li class="page-item"><a class="page-link" th:if="${pages.pageNum + 2} &lt; ${pages.pages}"
                                                                         th:href="@{/table1(start = ${pages.pageNum + 3})}">
                                                    <span th:text="${pages.pageNum + 3}"></span></a>
                                                </li>
                                                <li class="page-item"><a class="page-link" th:if="${pages.pageNum + 3} &lt; ${pages.pages}"
                                                                         th:href="@{/table1(start = ${pages.pageNum + 4})}">
                                                    <span th:text="${pages.pageNum + 4}"></span></a>
                                                </li>
                                                <li class="page-item nextPage">
                                                    <a class="page-link" id="nextPage" onclick="nextPage()" aria-label="Next">
                                                        <span aria-hidden="true">&raquo;</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <span class="data-pos" th:text="共+${pages.pages}+页"></span>
                                                </li>
                                            </ul>
                                        </nav>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- Page Footer-->
            <footer th:replace="footer::footer"></footer>
        </div>
    </div>
</div>
<!-- JavaScript files-->
<script>
    //全选
    function ckAll() {
        var flag = document.getElementById("allChecks").checked;
        var cks = document.getElementsByName("check");
        for (var i = 0; i < cks.length; i++) {
            cks[i].checked = flag;
        }
    }

    //批量删除user
    function DelSelect2() {
        var Checkbox = false;
        $("input[name='check']").each(function () {
            if (this.checked == true) {
                Checkbox = true;
            }
        });
        if (Checkbox) {
            var t = confirm("您确认要删除选中的内容吗？");
            if (t == false) {
                return false;
            } else {
                var checkedID = "";
                $("input[name='check']").each(function () {
                    if (this.checked == true) {
                        checkedID += this.value + ",";

                    }
                });
                checkedID = checkedID.substring(0, checkedID.length - 1);
                window.location.replace("/user/delet?id=" + checkedID);
            }
        } else {
            alert("请选择您要删除的内容!");
            return false;
        }
    }
    function previousPage(){
        var pageNum = $('#pageNum').val()
        if (pageNum <= 1){
            $('.previous').addClass('disabled')
            alert("没有更前的页")
        }else {
            $('.previous').removeClass('disabled')
            var previous = pageNum - 1
            window.location.href = "/table1?start=" + previous
        }
    }

    function nextPage(){
        var pageNum = $('#pageNum').val()
        var pageSize = $('#pages').val()
        if (pageNum >= pageSize){
            $('.nextPage').addClass('disabled')
            alert("没有更多的页")
        }else {
            var next = parseInt(pageNum) + 1
            $('.previous').removeClass('disabled')
            $('.nextPage').removeClass('disabled')
            window.location.href = "/table1?start=" + next
        }
    }
</script>
<script src="../../static/js/page-cut.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.0/js/bootstrap.min.js"></script>
<script src="../../static/js/front.js"></script>
</body>
</html>